<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>寄送表单</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../css/xadmin.css">
<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
 <script type="text/javascript" src="../../lib/layui/layui.js"
  charset="utf-8"></script>
  <script type="text/javascript" src="../../js/area.js"></script>
<script type="text/javascript" src="../../js/xadmin.js"></script>
</head>

<body>
	<div class="x-body">
		<form class="layui-form">
			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>姓名
				</label>
				<div class="layui-input-inline">
					<input type="text" id="username" name="username" required=""
						lay-verify="required" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="phone" class="layui-form-label"> <span
					class="x-red">*</span>联系方式
				</label>
				<div class="layui-input-inline">
					<input type="text" id="phone" name="phone" required=""
						lay-verify="phone" autocomplete="off" class="layui-input">
				</div>
			</div>
      <div class="layui-form-item">
                <label class="layui-form-label">选择地区</label>
                <div class="layui-input-inline">
                    <select name="province" lay-filter="province" value="110000_2_0">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="city" lay-filter="city">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="area" lay-filter="area">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
            </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label"> <span
          class="x-red">*</span>寄件时间
        </label>
      <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
        <input class="layui-input"  name="start" id="start">
      </div>
       </div>
       <div class="layui-form-item">
        <label for="username" class="layui-form-label"> <span
          class="x-red">*</span>收件人姓名
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" required=""
            lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="phone" class="layui-form-label"> <span
          class="x-red">*</span>收件人联系方式
        </label>
        <div class="layui-input-inline">
          <input type="text" id="phone" name="phone" required=""
            lay-verify="phone" autocomplete="off" class="layui-input">
        </div> 
      </div>
            
          <div class="layui-form-item">
                <label class="layui-form-label">选择地区</label>
                <div class="layui-input-inline">
                    <select name="ttprovince" lay-filter="ttprovince" value="110000_2_0">
                        <option value="">请选择省</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="ttcity" lay-filter="ttcity">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="ttarea" lay-filter="ttarea">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
            </div>
        <div class="layui-form-item">
        <label for="username" class="layui-form-label"> <span
          class="x-red">*</span>详细地址
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" required=""
            lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label"> <span
          class="x-red">*</span>订单金额
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" required=""
            lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>

			<div class="layui-form-item">
				<label for="username" class="layui-form-label"> <span
					class="x-red">*</span>支付方式
				</label>
				<div class="layui-input-inline">
					<select name="contrller">
						<option>支付方式</option>
						<option>支付宝</option>
						<option>微信</option>
						<option>货到付款</option>
					</select>
				</div>
			</div>

      <div class="layui-form-item">
        <label for="username" class="layui-form-label"> 
        <span class="x-red">*</span>月卡使用
        </label>
        <div class="layui-input-inline">
          <input type="radio" id="username" name="username"
           autocomplete="off" id="shows" lay-filter="shows" class="layui-input" title="是" />
          <input type="radio" id="username2" name="username"
         autocomplete="off" id="hidess"  lay-filter="hides" class="layui-input" title="否">
        </div>
      </div>

      <div class="layui-form-item" id="isuse" style="display:none">
        <label for="username" class="layui-form-label"> 
        <span class="x-red">*</span>卡券分类
        </label>
        <div class="layui-input-inline" >
          <select name="contrller">
            <option>周卡</option>
            <option>月卡</option>
            <option>季卡</option>
            <option>年卡</option>
          </select>
        </div>
      </div>

      <div class="layui-form-item">
        <label for="username" class="layui-form-label"> <span
          class="x-red">*</span>实付金额
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" required=""
            lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label"> <span
          class="x-red">*</span>收款人姓名
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" required=""
            lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label"> <span
          class="x-red">*</span>收款人工号
        </label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username" required=""
            lay-verify="required" autocomplete="off" class="layui-input">
        </div>
      </div>
			
			<div class="layui-form-item layui-form-text">
				<label for="desc" class="layui-form-label"> 备注 </label>
				<div class="layui-input-block">
					<textarea placeholder="请输入内容" id="desc" name="desc"
						class="layui-textarea"></textarea>
				</div>
			</div>
			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> </label>
				<button class="layui-btn" lay-filter="add" lay-submit="">
					确定寄件</button>
			</div>
		</form>
	</div>
  <script>
    layui.use('form', function(){
      var form = layui.form();
      form.on('radio(shows)', function(data){
        document.getElementById('isuse').style.display="";
    }); 
       form.on('radio(hides)', function(data){
        //document.getElementById('hehe').style.display="none";
        $("#isuse").css({
            display: 'none'
        });
    }); 
      
    });
    </script>
	  <script>
             layui.use(['laydate'], function(){
                 $ = layui.jquery;
               var laydate = layui.laydate
               laydate.render({
               elem: '#start' //指定元素
              ,calendar: true
              ,type: 'datetime'
               });
             });
         </script> 

          <script>
             layui.use(['laydate'], function(){
                 $ = layui.jquery;
               var laydate = layui.laydate
               laydate.render({
               elem: '#end' //指定元素
               ,calendar: true
               ,type: 'datetime'
               });
               
             });
         </script> 
    <script>
        //初始数据
        var areaData = Area;
        var $form;
        var form;
        var $;
        layui.use(['jquery','form'], function() {
            $ = layui.jquery;
            form = layui.form();
            $form = $('form');
            loadProvince();
        });
         //加载省数据
        function loadProvince() {
            var proHtml = '';
            for (var i = 0; i < areaData.length; i++) {
                proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
            }
            //初始化省数据
            $form.find('select[name=province]').append(proHtml);
            form.render();
            form.on('select(province)', function(data) {
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    loadCity(areaData[index].mallCityList);
                } else {
                    $form.find('select[name=city]').parent().hide();
                }
            });
        }
         //加载市数据
        function loadCity(citys) {
            var cityHtml = '';
            for (var i = 0; i < citys.length; i++) {
                cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
            }
            $form.find('select[name=city]').html(cityHtml).parent().show();
            form.render();
            loadArea(citys[0].mallAreaList);
            form.on('select(city)', function(data) {
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    loadArea(citys[index].mallAreaList);
                } else {
                    $form.find('select[name=area]').parent().hide();
                }
            });
        }
         //加载县/区数据
        function loadArea(areas) {
            var areaHtml = '';
            for (var i = 0; i < areas.length; i++) {
                areaHtml += '<option value="' + areas[i].areaCode + '">' + areas[i].areaName + '</option>';
            }
            $form.find('select[name=area]').html(areaHtml).parent().show();
            form.render();
            form.on('select(area)', function(data) {
                //console.log(data);
            });
        }

        //设置省市区
        function setArea(area){
            var p = '';
            var c = '';
            var a = '';
            for (var i = 0; i < areaData.length; i++) {
                var provinceName = areaData[i].provinceName;
                var provinceCode = areaData[i].provinceCode;
                var mallCityList = areaData[i].mallCityList;
                for(var j=0;j<mallCityList.length;j++){
                    var cityName = mallCityList[j].cityName;
                    var cityCode = mallCityList[j].cityCode;
                    var mallAreaList = mallCityList[j].mallAreaList;
                    for(var k=0;k<mallAreaList.length;k++){
                        if(area == mallAreaList[k].areaName){
                            var areaCode = mallAreaList[k].areaCode;
                            a = areaCode;
                            c = cityCode+'_'+mallAreaList.length+"_"+j;
                            p = provinceCode+"_"+mallCityList.length+"_"+i;
                        }
                    }
                }
            }
            console.log('p:'+p+"====c:"+c+"=====a:"+a);

            $('select[name=province]')[0].value = p;
            $('select[name=city]').val(c);
            $('select[name=area]').val(a);
            layui.use('form',function(){
                var form = layui.form();
                form.render();
            });
        }

        setArea('丰台区');
    </script>
    <script>
        //初始数据
        var areaData = Area;
        var $form;
        var form;
        var $;
        layui.use(['jquery','form'], function() {
            $ = layui.jquery;
            form = layui.form();
            $form = $('form');
            ttloadProvince();
        });
         //加载省数据
        function ttloadProvince() {
            var proHtml = '';
            for (var i = 0; i < areaData.length; i++) {
                proHtml += '<option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
            }
            //初始化省数据
            $form.find('select[name=ttprovince]').append(proHtml);
            form.render();
            form.on('select(ttprovince)', function(data) {
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    ttloadCity(areaData[index].mallCityList);
                } else {
                    $form.find('select[name=ttcity]').parent().hide();
                }
            });
        }
         //加载市数据
        function ttloadCity(citys) {
            var cityHtml = '';
            for (var i = 0; i < citys.length; i++) {
                cityHtml += '<option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
            }
            $form.find('select[name=ttcity]').html(cityHtml).parent().show();
            form.render();
            ttloadArea(citys[0].mallAreaList);
            form.on('select(ttcity)', function(data) {
                var value = data.value;
                var d = value.split('_');
                var code = d[0];
                var count = d[1];
                var index = d[2];
                if (count > 0) {
                    ttloadArea(citys[index].mallAreaList);
                } else {
                    $form.find('select[name=ttarea]').parent().hide();
                }
            });
        }
         //加载县/区数据
        function ttloadArea(areas) {
            var areaHtml = '';
            for (var i = 0; i < areas.length; i++) {
                areaHtml += '<option value="' + areas[i].areaCode + '">' + areas[i].areaName + '</option>';
            }
            $form.find('select[name=ttarea]').html(areaHtml).parent().show();
            form.render();
            form.on('select(ttarea)', function(data) {
                //console.log(data);
            });
        }

        //设置省市区
        function ttsetArea(area){
            var p = '';
            var c = '';
            var a = '';
            for (var i = 0; i < areaData.length; i++) {
                var provinceName = areaData[i].provinceName;
                var provinceCode = areaData[i].provinceCode;
                var mallCityList = areaData[i].mallCityList;
                for(var j=0;j<mallCityList.length;j++){
                    var cityName = mallCityList[j].cityName;
                    var cityCode = mallCityList[j].cityCode;
                    var mallAreaList = mallCityList[j].mallAreaList;
                    for(var k=0;k<mallAreaList.length;k++){
                        if(area == mallAreaList[k].areaName){
                            var areaCode = mallAreaList[k].areaCode;
                            a = areaCode;
                            c = cityCode+'_'+mallAreaList.length+"_"+j;
                            p = provinceCode+"_"+mallCityList.length+"_"+i;
                        }
                    }
                }
            }
            console.log('p:'+p+"====c:"+c+"=====a:"+a);

            $('select[name=ttprovince]')[0].value = p;
            $('select[name=ttcity]').val(c);
            $('select[name=ttarea]').val(a);
            layui.use('form',function(){
                var form = layui.form();
                form.render();
            });
        }

        ttsetArea('丰台区');
    </script>
</body>

</html>